<template>
  <div>
    <vxe-table
      border
      resizable
      show-overflow
      :data="params"
      ref="xTable"
      keep-source
      size="small"
      :edit-config="{ trigger: 'manual', mode: 'row' }"
    >
      <vxe-table-column field="pname" title="参数"></vxe-table-column>
      
      <vxe-table-column
        field="index"
        title="索引"
        :edit-render="{
          name: '$input',
          props: { type: 'int' },
        }"
      ></vxe-table-column>

      <vxe-table-column
        field="param.begin"
        title="开始地址"
        :edit-render="{
          name: '$input',
          props: { type: 'number' },
        }"
      ></vxe-table-column>
      <vxe-table-column
        field="param.count"
        title="个数"
        :edit-render="{
          name: '$input',
          props: { type: 'number' },
        }"
      ></vxe-table-column>
      <vxe-table-column
        field="param.bigend"
        title="是否大端"
        :edit-render="{
          name: '$select',
          options: trueFalse,
        }"
      ></vxe-table-column>
      <vxe-table-column
        field="param.swap"
        title="高低互换"
        :edit-render="{
          name: '$select',
          options: trueFalse,
        }"
      ></vxe-table-column>
      <vxe-table-column
        field="param.number"
        title="乘法因子"
        :edit-render="{
          name: '$input',
          props: { type: 'number', placeholder: '请输入数值' },
        }"
      ></vxe-table-column>
      <vxe-table-column
        field="param.func"
        title="解析函数"
        :edit-render="{
          name: '$input',
        }"
      ></vxe-table-column>
      <vxe-table-column title="操作" width="160">
        <template #default="{ row }">
          <template v-if="$refs.xTable.isActiveByRow(row)">
            <vxe-button @click="saveRowEvent(row)">保存</vxe-button>
            <vxe-button @click="cancelRowEvent(row)">取消</vxe-button>
          </template>
          <template v-else>
            <vxe-button @click="editRowEvent(row)">编辑</vxe-button>
          </template>
        </template>
      </vxe-table-column>
    </vxe-table>
  </div>
</template>
<script>
export default {
  props: ["params"],
  data() {
    return {
      trueFalse: [
        { label: "是", value: true },
        { label: "否", value: false },
      ],
    };
  },
  methods: {
      init(row) {
      if (row) {
        if (!row.pid) {
          row.pid = "";
        }
        if (!row.sid) {
          row.sid = "";
        }
        if (!row.index) {
          row.index = 0;
        }
        if (!row.count){
          row.count = 1
        }
        if (row.offset == undefined) {
          row.offset = 0;
        }
        if (row.swap == undefined) {
          row.swap = true;
        }
        if (row.bigend == undefined) {
          row.bigend = false;
        }
        if (row.func == undefined) {
          row.func = "";
        }
        if (row.begin == undefined) {
          row.begin = 0;
        }
        if (row.number == undefined) {
          row.number = "";
        }
      }
    },
    editRowEvent(row) {
      if(!row.param){
         row.param = {}
      }
     
      this.init(row.param);
      const $table = this.$refs.xTable;
      $table.setActiveRow(row);
    },
    saveRowEvent() {
      const $table = this.$refs.xTable;
      //let self = this;
      $table.clearActived()
    },
    cancelRowEvent(row) {
      const $table = this.$refs.xTable;
      $table.clearActived().then(() => {
        // 还原行数据
        $table.revertData(row);
      });
    },
  },
};
</script>
